<template>
  <div>
    <el-form :inline="true" :model="selectSysDictType" class="demo-form-inline">
      <el-form-item label="字典名称">
        <el-input v-model="selectSysDictType.dictName" placeholder="请输入字典名称"></el-input>
      </el-form-item>
      <el-form-item label="字典类型">
        <el-input v-model="selectSysDictType.dictType" placeholder="请输入字典类型"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="selectSysDictType.status" placeholder="字典状态" clearable>
          <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in sysNormalDisableDictDataList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <div class="block">
          <el-date-picker
              v-model="selectSysDictType.createTimeRange"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              unlink-panels
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div style="margin-top: 20px">
<!--      todo 部分按钮点击事件未完成-->
      <el-button @click="openAddSysDictDialogForm" type="primary">添加</el-button>
      <el-button @click="openUpdateSysDictDialogForm(multipleSelection[0])" type="success" :disabled="updateDisabled" >修改</el-button>
      <el-button @click="batchDelete" type="warning" :disabled="deleteDisabled" >删除</el-button>
      <el-button @click="toggleSelection()" type="primary">取消选择</el-button>
      <el-button @click="outExe" type="info">导出</el-button>
      <el-button round type="warning">清理缓存</el-button>
    </div>
    <el-table
        ref="multipleTable"
        :data="sysDictTypePage"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        id="enableExportExcel">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          label="字典编号"
          width="120">
        <template slot-scope="scope">{{ scope.row.dictId }}</template>
      </el-table-column>
      <el-table-column
          prop="dictName"
          label="字典名称"
          width="120">
        <template slot-scope="scope">{{ scope.row.dictName }}</template>
      </el-table-column>
      <el-table-column
          prop="dictType"
          label="字典类型"
          width="200">
        <template slot-scope="scope"><a @click="toDictDataView(scope.row)" style="color: #409EFF;cursor: pointer">{{ scope.row.dictType }}</a></template>
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="120">
        <template slot-scope="scope">{{ scope.row.status }}</template>
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          width="120">
        <template slot-scope="scope">{{ scope.row.remark }}</template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="200">
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200px">
        <template slot-scope="scope">
         <span style="margin-right: 15px">
           <i class="el-icon-edit"></i>
           <el-button @click="openUpdateSysDictDialogForm(scope.row)" type="text" size="small">修改</el-button>
         </span>
          <span style="margin-right: 15px">
          <i class="el-icon-delete"></i>
          <el-button @click="deleteSysDict(scope.row)" type="text" size="small">删除</el-button>
             </span>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!-- 添加对话框 -->

    <el-dialog title="添加字典类型" :visible.sync="addSysDictDialogFormVisible" width="600px">
      <el-form :model="sysDictType">
        <el-form-item label="字典名称" :label-width="formLabelWidth">
          <el-input v-model="sysDictType.dictName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典类型" :label-width="formLabelWidth">
          <el-input v-model="sysDictType.dictType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio v-model="sysDictType.status" label=0>正常</el-radio>
          <el-radio v-model="sysDictType.status" label=1>停用</el-radio>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
              v-model="sysDictType.remark">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addSysDictDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSysDict">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 修改对话框 -->
    <el-dialog title="修改字典类型" :visible.sync="updateSysDictDialogFormVisible" width="600px">
      <el-form :model="sysDictType">
        <el-form-item label="字典名称" :label-width="formLabelWidth">
          <el-input v-model="sysDictType.dictName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典类型" :label-width="formLabelWidth">
          <el-input v-model="sysDictType.dictType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio v-model="sysDictType.status" label=0>正常</el-radio>
          <el-radio v-model="sysDictType.status" label=1>停用</el-radio>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
              v-model="sysDictType.remark">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateSysDictDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateSysDict">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MainView from "@/views/MainView.vue";
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
export default {
  components:{
    MainView
  },
  data() {
    return {
      //添加对话框是否打开属性
      addSysDictDialogFormVisible: false,
      // 表单中的标签宽度
      formLabelWidth: '100px',
      // 修改对话框的是否打开属性
      updateSysDictDialogFormVisible: false,
      //单个登录日志对象
      sysDictType: {
        //字典主键
        dictId: '',
        //字典名称
        dictName: '',
        //字典类型
        dictType: '',
        // 状态 0-正常 1-停用
        status: '',
        // 创建者
        createBy: '',
        //创建时间
        createTime: '',
        // 更新者
        updateBy: '',
        // 更新时间
        updateTime: '',
        // 备注
        remark: '',
      },
      // 当前第几页
      current: 1,
      //一页有几行
      size: 5,
      //一共有几条数据
      total: 0,
      //模糊查询条件变量
      selectSysDictType: {
        // 字典名称
        dictName: '',
        // 字典类型
        dictType: '',
        //状态 0-正常 1-停用
        status: '',
        // 创建时间
        createTimeRange: '',
        // 操作时间_开始
        createTimeRangeStart: '',
        // 操作时间_结束
        createTimeRangeEnd: '',
      },
      //分页数据
      sysDictTypePage: null,
      //表格复选框标签
      multipleSelection: [],
    //   复选框选中的字典类型Id
      multipleSelectionSysDictTypeIds:[],
      // 修改按钮是否隐藏的变量
      updateDisabled:true,
      // 删除按钮是否隐藏的变量
      deleteDisabled:true,
      // 系统开关字典列表
      sysNormalDisableDictDataList: [],
    }
  },

  methods: {

    handleSizeChange(val) {
      this.size = val
      this.loadSysDictTypePage()
    },
    handleCurrentChange(val) {
      this.current = val
      this.loadSysDictTypePage()
    },
    // 清空所有复选框
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      //保存字典ID
      this.multipleSelectionSysDictTypeIds=[]
      for (const multipleSelectionElement of this.multipleSelection) {
        this.multipleSelectionSysDictTypeIds.push(multipleSelectionElement.dictId)
      }

      if (this.multipleSelection.length>0){
        //  可见
        this.deleteDisabled=false
      }else {
        // 不可见
        this.deleteDisabled=true
      }
      if (this.multipleSelection.length==1){
       //  可见
       this.updateDisabled=false
      }else {
        // 不可见
        this.updateDisabled=true
      }


    },
    loadSysDictTypePage() {
      this.axios.get("/sysDictType/page?current=" + this.current
          + "&size=" + this.size
          + "&dictName=" + this.selectSysDictType.dictName
          + "&dictType=" + this.selectSysDictType.dictType
          + "&status=" + this.selectSysDictType.status
          + "&createTimeRangeStart=" + this.selectSysDictType.createTimeRangeStart
          + "&createTimeRangeEnd=" + this.selectSysDictType.createTimeRangeEnd
      )
          .then(result => {
            this.sysDictTypePage = result.data.data.records
            this.total = result.data.data.total
          })

    },
    // 模糊查询搜索按钮
    onSubmit() {
      this.selectSysDictType.createTimeRangeStart = ''
      this.selectSysDictType.createTimeRangeEnd = ''
      if (this.selectSysDictType.createTimeRange != null && this.selectSysDictType.createTimeRange.length != 0) {
        this.selectSysDictType.createTimeRangeStart = this.selectSysDictType.createTimeRange[0]
        this.selectSysDictType.createTimeRangeEnd = this.selectSysDictType.createTimeRange[1]
      }
      this.current = 1
      this.loadSysDictTypePage()
    },
    //删除字典类型--物理删除
    deleteSysDict(row) {
      this.axios.delete("/sysDict/"+row.dictId)
          .then(result=>{
            this.loadSysDictTypePage()
          })
    },
    // 打开修改对话框
    openUpdateSysDictDialogForm(row) {
      this.sysDictType = JSON.parse(JSON.stringify(row))
      this.updateSysDictDialogFormVisible = true
    },
    // 修改系统字典类型
    updateSysDict() {
      this.axios.put("/sysDictType", this.sysDictType)
          .then(result => {
            this.updateSysDictDialogFormVisible = false
            this.loadSysDictTypePage()
          })
    },
    // 添加系统字典类型
    addSysDict() {
      this.axios.post("/sysDictType", this.sysDictType)
          .then(result => {
            this.addSysDictDialogFormVisible = false
            this.loadSysDictTypePage()
          })
    },
    // 打开添加系统字典类型对话框
    openAddSysDictDialogForm(){
      this.empty()
      this.addSysDictDialogFormVisible=true
    },
    //清空单个对象
    empty(){
      this.sysDictType={
        dictId: '',
        //字典名称
        dictName: '',
        //字典类型
        dictType: '',
        // 状态 0-正常 1-停用
        status: '',
        // 创建者
        createBy: '',
        //创建时间
        createTime: '',
        // 更新者
        updateBy: '',
        // 更新时间
        updateTime: '',
        // 备注
        remark: '',
      }
    },
    toDictDataView(row){
      // 添加字典数据标签页
      this.callCustomMethod()
      if (this.hash()!='dictData'){
        this.$router.push({ path: '/dictData', query: { dictType: row.dictType } })
      }
    },
    hash() {
      return location.hash.replace("#/", "")
    },
    callCustomMethod() {
      this.$bus.$emit('toDictDataView');
    },

    //   批量删除
    batchDelete() {
      this.axios.delete("/sysDictType/batchDelete/"+this.multipleSelectionSysDictTypeIds)
          .then(result=>{
            this.current=1
            this.loadSysDictTypePage()
          })

    },
    //   导出表格数据为Excel
    //导出excel表格
    outExe() {
      this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            this.excelData = this.deptList; //你要导出的数据list。
            this.exportExcel();
          })
          .catch(() => {
          });
    },
    exportExcel() {
      //转换成excel时，使用原始的格式
      var xlsxParam = {raw: true};
      let fix = document.querySelector(".el-table__fixed");
      let wb;
      //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
      if (fix) {
        wb = XLSX.utils.table_to_book(
            document.querySelector("#enableExportExcel").removeChild(fix), xlsxParam);
        document.querySelector("#enableExportExcel").appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#enableExportExcel"), xlsxParam);
      }
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(new Blob([wbout], {type: "application/octet-stream"}), "导出详情单.xlsx");
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    //   根据字典类型名称获取字典数据
    loadDictDataListByDictTypeName() {
      this.axios.get("/sysDictData/getBySysDictTypeName/" + "sys_normal_disable")
          .then(result => {
            this.sysNormalDisableDictDataList = result.data.data
            console.log("----------this.sysNormalDisableDictDataList----------")
            console.log(this.sysNormalDisableDictDataList)
          })
    }


  },

  mounted() {
    this.loadSysDictTypePage()
    //   获取菜单状态字典
    this.loadDictDataListByDictTypeName()


  }
}
</script>